<template>
<div class="product">
<h2>产品分类</h2>
<p>{{info}}</p>
<button @click="jump">点击查看详情</button>

 <router-view></router-view>
 </div>
</template>
<script>
export default {
  // 实现编程时跳转
  methods: {
    jump () {
      console.log(this.$route)
      // 1.获取参数
      let id = this.$route.params.id
      if (id === '1') {
        this.$router.push({ name: 'mobai' })
      } else
      if (id === '2') {
        this.$router.push({ name: 'computer' })
      } else
      if (id === '3') {
        this.$router.push({ name: 'erji' })
      }
    }
  },
  data () {
    return {
      info: ''
    }
  },
  //   这是监听参数
  watch: {

    '$route' (to) {
      let id = to.params.id
      if (id === '1') {
        this.info = '这是手机相关产品'
      }
      if (id === '2') {
        this.info = '这是电脑相关产品'
      }
      if (id === '3') {
        this.info = '这是耳机相关产品'
      }
    }

  },

  // 当路有地址发生变化时触发钩子函数,当地址发过来就运行一次,后面复用不起作用
  mounted () {
    console.log(this.$route)
    let id = this.$route.params.id
    if (id === '1') {
      this.info = '这是手机相关产品'
    }
    if (id === '2') {
      this.info = '这是电脑相关产品'
    }
    if (id === '3') {
      this.info = '这是耳机相关产品'
    }
  }

}
</script>

<style lang="less">

</style>
